<template>
  <div>
    <div class="bigbox">
      <div id="yzMap"></div>
    </div>
    <div>
      <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import MapInit from './Maplnit.js';

export default {
  data() {
    return {

    }
  },
  name: 'App',
  components: {
  },
  created() {
    this.roadMap()
  },
  methods: {
    roadMap() {
      MapInit.init().then(
        T => {
          this.T = T;
          const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk=4d0a1ce692e77564196ab5173a3ac082";
          const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
          const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
          this.map = new T.Map('yzMap', config);
          const ctrl = new T.Control.MapType();
          this.map.addControl(ctrl);
          this.map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);
          // //创建信息窗口对象
          // const marker = new T.Marker(T.LngLat(116.401003, 39.903117));// 创建标注
          // this.map.addOverLay(marker);
          const coordinates = [
            [116.401003, 39.903117],
            [116.402003, 39.904117],
            [116.403003, 39.905117]
          ];

          coordinates.forEach(coord => {
            const lngLat = new T.LngLat(coord[0], coord[1]);
            const marker = new T.Marker(lngLat);
            this.map.addOverLay(marker);
            var markerInfoWin = new T.InfoWindow("信息窗口");
            marker.addEventListener("click", function (e) {
              // 在这里定义标注被点击时的操作
              // 点击触发信息窗口标签
              // marker.openInfoWindow(markerInfoWin);
              console.log("标注被点击了", e);


              // 复杂的内容信息窗口
              var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='http://lbs.tianditu.gov.cn/images/logo.png' width='101' height='49' title='天安门'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
              markerInfoWin.setContent(sContent);
              marker.openInfoWindow(markerInfoWin);
            });
          });
        }).catch()
    }

  }
}
</script>

<style>
  .bigbox {
    width: 100vw;
    height: 500px;
    position: relative;
  }
  #yzMap {
    top: 0;
    left: 0;
    width: 100vw;
    height: 500px;
    position: absolute;
  }
</style>
